<template>
	<div class="content">
		<view class="tab-container">
			<view class="title box-flex" v-if="currentIndex == 1">
				我的莲米 <view class="number">
					{{info.pointCount}}
				</view>
			</view>
      <view class="title" v-else>
        <view class="number">{{info.pointCount}}</view>
        未来30天过期莲米: {{info.expiringSoonPoint}}
      </view>
			<view class="tab-headers">
				<view class="tab-header" :class="{ active: currentIndex === 1 }" @click="changeTab(1)">莲米明细</view>
				<view class="tab-header" :class="{ active: currentIndex === 2 }" @click="changeTab(2)">即将过期</view>
			</view>
			<view class="tab-content">
				<div class="content-tags" v-if="currentIndex == 1">
					<uni-data-checkbox mode="tag" v-model="selectType" :localdata="sex" style="flex: 2; display: inline-block;" @change="checkChange"></uni-data-checkbox>
					<!-- <div class="title-date">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">
									{{ date }}
									<uni-icons type="right" size="16" style="color: #b0b0b0"></uni-icons>
								</view>
							</picker>
						</view>
					</div> -->
				</div>
				<scroll-view scroll-y class="list-container" :scroll-top="scrollTop" @scrolltolower="loadMore">
					<div class="list" v-if="recordList.length">
						<view class="record-list-container">
							<view class="record-item" v-for="(item, index) in recordList" :key="index" @click="jump(item)">
								<view class="record-item-content">
									<view class="record-meta">
										<text class="record-header-text">{{ item.title }}</text>
										<text>{{ item.storeName || '-' }}</text>
										<text>{{ item.dateStr }}</text>
										<!-- <text v-if="currentIndex == 1" :class="item.balanceStatus == 0 ? 'statusLose' : 'status'">{{statusCode2[item.balanceStatus]}}</text>
										<text v-else>{{ statusCode[item.balanceStatus] }}</text> -->
									</view>
									<view class="record-header">
										<text class="amount2" :style="{ color: item.type=='1' ? '#f02506' : '#b0b0b0' }">{{item.type=='1'?'+':'-'}}{{ item.point }}</text>
									</view>
									
								</view>
								<div class="line"></div>
							</view>
						</view>
					</div>
          <view class="var-empty" style="margin-top: 256rpx;" v-else>
            <image src="@/static/mine/lianmi-empty.png" mode="aspectFill" style="width: 336rpx;height: 174rpx"></image>
            <view class="p">暂无数据</view>
          </view>
					<view class="loading-status">
						<template v-if="loading">
							<uni-load-more status="loading"></uni-load-more>
						</template>
						<template v-else-if="recordList.length && noMoreData">
							<text class="no-more">没有更多数据了</text>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>
	</div>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			date: currentDate,
			currentIndex: 1, // 当前选中的选项卡索引，初始为0即选中第一个
			selectType: 0,
			page: 1, // 当前页码
			pageSize: 10, // 每页条数
			loading: false, // 加载状态
			noMoreData: false, // 是否无更多数据
			scrollTop: 0, // 滚动位置,
			total: 0,
      info:{},
			sex: [{
        text: '全部',
        value: 0
      },{
        text: '已获得',
        value: 1
      },{
        text: '已消耗',
        value: 2
      }],
			statusCode: {
				1: '待结算',
				2: '已结算'
			},
			statusCode2: {
				0: '失败',
				1: '成功',
				2: '审核中'
			},
			recordList: []
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad() {
		this.initData();
	},
	methods: {
		jump(item) {
			// if (item.remark == '申请提现') {
			// 	uni.navigateTo({
			// 		url: `/mineComponentPackage/component/schedule/index?withdrawalId=${item.relationId}`
			// 	});
			// } else {
			// 	uni.navigateTo({
			// 		url: `/mineComponentPackage/component/check/base?withdrawalId=${item.relationId}`
			// 	});
			// }
		},
		changeTab(index) {
			this.currentIndex = index;
			this.recordList = [];
			this.page = 1;
			this.selectType = 0;
			this.fetchData();
		},
		handleToUrl(url) {
			uni.navigateTo({
				url
			});
		},
		// 初始化数据
		async initData() {
			try {
				this.loading = true;
				this.fetchData();
			} finally {
				this.loading = false;
			}
		},

		// 加载更多
		async loadMore() {
      if(this.total > this.recordList.length){
				this.loading = true;
        ++this.page;
        this.fetchData()
      }else{
        this.noMoreData = true
      }
		},

		// 请求数据（需替换为真实API）
		async fetchData() {
			uni.showLoading({
				title: '加载中'
			});
			const data = {
				page: this.page,
				pageSize: this.pageSize,
        selectType:this.currentIndex,
				type: this.selectType
			};
			this.$post('/yahe/point/myPointInfo', data, '1').then((res) => {
        this.loading = false
				if (res.code == '1') {
          this.info = res.content
					this.recordList = this.recordList.concat(res.content.data.records || []);
					this.page = res.content.data.current;
					this.total = res.content.data.total;
				} else {
					this.$toast(res.message, 'none');
				}
			});
		},
		bindDateChange: function (e) {
			uni.showLoading({
				title: '加载中'
			});
			this.date = e.detail.value;
			this.page = 1;
			this.recordList = [];
			this.fetchData();
		},
		checkChange(e) {
			uni.showLoading({
				title: '加载中'
			});
			this.page = 1;
			this.recordList = [];
			this.fetchData();
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}`;
		}
	}
};
</script>

<style scoped lang="less">
.content {
	box-sizing: border-box;
	height: 100%;
  padding: 0 24rpx;
}

.loading-status {
	padding: 20rpx;
	text-align: center;
}

.no-more {
	color: #999;
	font-size: 24rpx;
}

.tab-container {
	height: 100%;
	box-sizing: border-box;
	.title {
		align-items: center;
    flex-wrap: wrap;
		font-weight: 400;
		font-size: 28rpx;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #EFEFEF;
		.number {
			font-weight: bold;
			font-size: 40rpx;
			color: #3A3A3A;
			margin-left: 4rpx;
		}
	}
}
.list-container {
	height: 90%;
}

.tab-headers {
	display: flex;
  align-items: center;
	justify-content: space-around;
  height: 88rpx;
}

.tab-header {
	font-weight: 500;
	font-size: 28rpx;
	text-align: center;
  position: relative;
  line-height: 88rpx;
  &.active{
    color: var(--theme-color);
  }
  &.active::after {
    display: block;
    content: '';
    background: var(--theme-color);
    position: absolute;
    bottom: 14rpx;
    left: 50%;
    transform: translate(-50%,0);
    width: 50rpx;
    height: 6rpx;
    border-radius: 6rpx;
  }
}


.tab-content {
	line-height: 1.6;
	height: 84%;
  .content-tags{
    padding: 24rpx 0;
    display: flex; align-items: center;
  }
}

::v-deep .checklist-group .checklist-box.is--tag.is-checked {
	border-color: transparent !important;
	background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%) !important;
	border-radius: 8rpx 8rpx 8rpx 8rpx !important;
	color: #fff;
	padding: 20rpx 40rpx;
}

::v-deep .uni-data-checklist .checklist-group .checklist-box.is--tag {
	border-color: transparent !important;
	border-radius: 8rpx 8rpx 8rpx 8rpx !important;
	color: #6d6d6d;
	padding: 20rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	line-height: 28rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
  margin: 0!important;
	margin-right: 16rpx!important;
}

/* ::v-deep .tab-container {
		padding: 20rpx;
	} */

.record-item {
	border-radius: 10rpx;
	padding: 20rpx 0rpx;
	margin-bottom: 10rpx;
	
	.record-item-content {
	   display: flex;	
	   justify-content: space-between;
	}
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.record-header-text {
	text-align: left;
	font-style: normal;
	text-transform: none;
	font-weight: bold;
	font-size: 26rpx;
	color: #3a3a3a;
}

.amount {
	text-align: left;
	font-style: normal;
	text-transform: none;
	font-weight: 400;
	font-size: 30rpx;
	color: #ff6737;
}

.amount2 {
	text-align: left;
	font-style: normal;
	text-transform: none;
	// font-weight: 500;
	font-size: 30rpx;
	color: #b0b0b0;
}

.record-meta {
	display: flex;
	// justify-content: space-between;
	flex-direction: column;
	// align-items: center;
	gap: 10rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
}

.status {
	color: #999;
}

.statusLose {
	color: #f02506;
}

.line {
	width: 100%;
	margin: 0 auto;
	margin-top: 20rpx;
	border-bottom: 1rpx solid #efefef;
}

.title-date {
	display: inline-block;
	font-weight: 400;
	font-size: 28rpx;
}

.title-number {
	margin-left: 10px;
	font-weight: 400;
	font-size: 28rpx;
	color: #b0b0b0;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.uni-list-cell-db {
	display: block;
	border: 2rpx solid #d1d1d1;
	border-radius: 8rpx;
	padding: 8rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.uni-input {
	display: flex;
	align-items: center;
}
</style>
